<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS 选择器</title>
	<link rel="stylesheet" type="text/css" href="at-rule.css">
	<style type="text/css">
		/* css3支持变量 */
		/* 定义全局变量 */
		:root {
			--blue: #007bff;
		}
		/* 定义局部变量 */
		.custom_var {
			--primary: #cc7baf;
		}



		/* *作用于所有元素，会给浏览器增加大量不必要的负荷 */
		* {
			margin: 0;
			padding: 0;
		}
		/* !important 通常用于覆盖内联样式、外部样式表或浏览器默认值等其他样式。但是，应谨慎使用 !important，因为它可能会打破您代码的层叠性和可维护性 */
		.my-imp-div {
			margin: 20px !important;
		}

		/* id选择器 类选择器 标签选择器 交集选择器 并集选择器*/
		body {
			padding-bottom: 1200px;
		}
		h2 {
			color: blue;
			margin-top: 10px;
		}
		#idddd {}
		.classss {}
		ol {}
		#idddd.clsss {}
		#idddd,.cls111,.cls112 {}
		/* 属性选择器 */
		div.property p[attr1]{ /*[attr] 用来选择带有attr属性的元素*/
			color: yellowgreen;
		}
		div.property p[attr1='2']{ /*[attr=xxx] 用来选择attr属性等于xxx的元素*/
			color: red;
		}
		div.property2 p[class~=input] { /*[attr~=xxx] 这个选择器中间用了~=,选择属性值包含xx的元素*/
			color: blueviolet;
		}
		div.property3 p[class|=article] { /*[attr|=xxx] 这个选择器是用来选择为xxx或者xxx- 开头的元素*/
			color: darkcyan;
		}
		div.property4 p[class^=article] { /*[attr^=xxx]，这个选择器会匹配xxx开头,实际就是用正则去匹配属性值,只要是xxx开头就行*/
			color: darkgoldenrod;
		}
		div.property5 p[class$=e] { /*[attr$=xxx] 这个选择器用正则匹配属性以XXX结尾的元素*/
			color: orange;
		}
		div.property6 p[class*=cle] { /*[attr*=xxx] 这个选择器用正则匹配的方法来选择属性值中包含XXX字符的所有元素*/
			color: darkred;
		}
		/* 后代选择器 */
		div.descendant div.r {
			color: orange;
		}
		/* 子元素选择器：只遍历第一代子元素 */
		div.desc1 > div.r {
			color: green;
		}
		/* 相邻兄弟选择器 */
		div.desc2 .r1 + .r2 {
			color: blue;
		}
		/* 通用兄弟选择器 */
		div.desc3 .r1 ~ .r2 {
			color: blue;
		}



		/* 伪类选择器 */
		div.fc div {
			display: block;
			cursor: null;
			background: orange;
			width: 100px;
			height: 100px;
		}
		div.fc div:first-child:hover {
			cursor: pointer;
			background: pink;
		}
		div.fc button {
			background: green;
			color: black;
		}
		div.fc button:active {
			background: pink;
			color: white;
		}
		div.fc input {
			font-size: 16px;
			padding: 6px;
			color: black;
			background: pink;
			border: 1px solid red;
		}
		div.fc input:focus {
			background: darkcyan;
			border: 1px solid blue;
			color: white;
		}
		div.fc a:visited {
			background: green;
		}
		div.fc .input2:enabled {
			background: darkcyan;
			color: white;
		}
		div.fc .input2:disabled {
			background: grey;
			border: 1px solid blue;
			color: white;
		}
		div.fc li {
			color: white;
			font-size: 16px;
			height: 40px;
			width: 120px;
			text-align: center;
		}
		/*
		:first-child 选取当前选择器下的第一个元素
		:last-child 选取当前选择器下的最后一个元素
		:nth-child(an+b) 选取指定位置的元素
		:only-child 选取元素唯一的子元素,如果元素的父元素只有它一个子元素就会生效
		:only-of-type 选取唯一的某个元素类型
		:not(selector)：  选取不符合括号内选择器的所有元素
		*/
		div.fc li:nth-child(2n) { /*偶数位 等价于:nth-child(even)*/
			background: darkcyan;
		}
		div.fc li:nth-child(2n+1) { /*奇数位 等价于:nth-child(odd)*/
			background: powderblue;
		}
		/*:only-of-type 选取唯一的某个元素类型*/
		div.fc div[class="fc-sub-div"] {
			background-color: yellow;
			height: 400px;
		}
		div.fc div[class="fc-sub-div"] .c:nth-of-type(2n) {
			color: darkred;
		}
		div.fc *:not(div,p,ul,li,input,a,button) {
			font-size: 20px;
			color: green;
			font-weight: bold;
		}



		/* 伪属性选择器 
		
			::after和::before是虚拟元素，不会影响真正元素的所在文档的位置，对:first-child或者:last-child这种伪类选择不会造成影响
			document不能获取到::after和::before所对应的节点对象，但是可以通过css的接口获取其样式属性。
		*/
		div.fp > p:first-child::first-line {
			font-size: 16px;
			color: green;
		}
		div.fp > p:first-child::first-letter {
			font-size: 20px;
			font-weight: bold;
			color: orangered;
		}
		div.fp > p:first-child::selection {
			color: white;
			background: blue;
		}
		div.fp > p:last-child {
			color: orangered;
			font-size: 16px;
		}
		div.fp > p:last-child::before {
			content: "❤️";
		}
		div.fp > p:last-child::after {
			content: "🌞";
		}

		div.fp ul {
			list-style: none;

		}
		div.fp ul li {
			display: inline;
		}
		div.fp ul li:not(:last-child)::after {
			content: " | ";
		}


		/* css样式中&的用法:在css中，“&”符号通常用于选择器中，表示选择某个元素的子元素或特定状态下的元素 */
		/*
			1、&- ：连接父元素和子元素的类名
			.btn {
  				&-primary {
    				...
  			}
  			编译后：
  			.btn-primary {...}

  			2、&. ：连接父元素和子元素的类名
  			.btn {
				&.primary {...}
  			}
  			编译后：
  			.btn.primary {...}

  			3、&::before和&::after  ：表示在当前元素的前面或后面插入伪元素
  			.btn {
  				&::before {...}
  				&::after {...}
  			}
  			编译后:
  			.btn::before {...}
  			.btn::after {...}

  			4、&:hover和&:focus  ：表示鼠标悬停或聚焦时应用的样式
  			.btn {
				&:hover {...}
				&:focus {...}
  			}
  			编译后：
  			.btn:hover {...}
  			.btn:focus {...}

  			5、&[attribute=value]  ：表示选择具有特定属性和属性值的元素
  			.btn {
  				&[disable] {...}
  				&[type='submit'] {...}
  			}
  			编译后：
  			.btn[disable] {...}
  			.btn[type='submit'] {...}

  			6、&:nth-child(n)和&:nth-of-type(n)：表示选择特定位置的子元素或同类型元素



  			&由什么语法提供：
  			&-、&.：由Sass和Less等CSS预处理器提供
			&::before和&::after、
			&:hover和&:focus、
			&[attribute=value]、
			&:nth-child(n)和&:nth-of-type(n) ：由CSS原生语法提供
		*/
	</style>
</head>
<body>
	<h2>CSS3变量</h2>
	<div class="custom_var" style="font-size: 16px; color: black;">
		<span>not var</span> &nbsp;&nbsp;
		<span style="color:var(--blue);">var(--blue)</span> &nbsp;&nbsp;
		<span style="color:var(--primary);">var(--primary)</span>
	</div>
	<div class="my-imp-div" style="width:5px;height: 5px; background: pink;"></div>
	<h2>属性选择器</h2>
	<div class="property">
		<p>p1</p>
		<p attr1="1">p2</p>
		<p attr1="2">p3</p>
	</div>
	<div class="property2">
		<p class="input">p11</p>
		<p class="input name">p12</p>
		<p class="input_name">p13</p>
	</div>
	<div class="property3">
		<p class="article">p21</p>
		<p class="article-title">p22</p>
		<p class="article-content">p23</p>
		<p class="article_foor">p24</p>
	</div>
	<div class="property4">
		<p class="article">p31</p>
		<p class="article-title">p32</p>
		<p class="article-content">p33</p>
		<p class="article_foor">p34</p>
	</div>
	<div class="property5">
		<p class="article">p41</p>
		<p class="article-title">p42</p>
		<p class="article-content">p43</p>
		<p class="articlaae">p44</p>
	</div>
	<div class="property6">
		<p class="article">p41</p>
		<p class="article-title">p42</p>
		<p class="article-content">p43</p>
		<p class="articlaae">p44</p>
	</div>
	<h2>组合选择器</h2>
	<h3>后代选择器：X Y</h3>
	<div class="descendant">
		<div>
			<div class="r">row1</div>
		</div>
		<div class="r">row2</div>
		<div class="r">row3</div>
	</div>
	<h3>子元素选择器：X > Y</h3>
	<div class="desc1">
		<div>
			<div class="r">row1</div>
		</div>
		<div class="r">row2</div>
		<div class="r">row3</div>
	</div>
	<h3>相邻兄弟选择器：X+Y</h3>
	<div class="desc2">
		<div class="r1">row1</div>
		<div class="r2">row2</div>
		<div class="r2">row3</div>
	</div>
	<h3>通用兄弟选择器：X~Y</h3>
	<div class="desc3">
		<div class="r1">row1</div>
		<div class="r2">row2</div>
		<div class="r2">row3</div>
	</div>
	<h2>伪类选择器</h2>
	<div class="fc">
		<div></div>
		<button>button</button>
		<input type="text" name="name" value="100" />
		<a href="javascript:void(0);">连接</a>
		<br/>
		<input type="text" class="input2" name="name2" value="enabled" />
		<input type="text" class="input2" name="name3" value="disable" disabled />
		<br/>
		<ul>
			<li>line1</li>
			<li>line2</li>
			<li>line3</li>
			<li>line4</li>
			<li>line5</li>
		</ul>
		<div class="fc-sub-div">
			<div class="c">c1-1</div>
			<div class="c">c1-2</div>
			<div class="c">c1-3</div>
			<p class="c">c2-1</p>
			<p class="c">c2-2</p>
			<p class="c">c2-3</p>
		</div>
		<br/>
		<textarea>span</textarea>
	</div>
	<h2>伪元素选择器</h2>
	<div class="fp">
		<p>
			莫听穿林打叶声，<br>何妨吟啸且徐行。<br>竹杖芒鞋轻胜马，<br>谁怕？<br>一蓑烟雨任平生。<br>——苏轼《定风波》
		</p>
		<br/>
		<nav>
			<ul>
				<li>Item-1</li>
				<li>Item-2</li>
				<li>Item-3</li>
			</ul>
		</nav>
		<br>
		<p>新的一行</p>
	</div>
	<h2>@规则（At-Rule）</h2>
	<h3>@media测试</h3>
	<div class="media_query_div">
		<span>@media screen</span>
	</div>
	<div class="orientation_div">@media only screen and (orientation: landscape)</div>
	<div class="color_theme"> @media (prefers-color-scheme: dark|light)</div>
	<h3>@font-face测试</h3>
	<div class="custom_font_div">
		Custom-Font
	</div>
	<h3>@keyframs动画</h3>
	<h1 class="keyframes_h1">Animation, ha ha ha.</h1>
	<h3>@supports测试</h3>
	<div class="supports_div">
		@supports测试
	</div>
	<h3>@property测试</h3>
	<div>
		<div class="property_div p_d_1">虽然设定了 1s 的过渡动画 transition: 1s background，但是很可惜，CSS 是不支持背景渐变色的直接过渡变化的，我们得到的只是两帧之间的直接变化。</div>
		<div class="property_div p_d_2">使用 @property 优化后，能够执行过渡动画效果</div>
	</div>
	<h3>@container容器查询</h3>
	<div class="container_wrap">
    	<div class="g-container">
        	<div class="child">Title</div>
        	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
    	</div>
	</div>
</body>
</html>